import { defineComponent, h } from "vue";
const dataattr = "data-dynamic-style";
export default defineComponent({
    inheritAttrs: false,
    props: {
        // id: { required: true, type: String },
        stylesheet: { required: true, type: String },
    },
    // setup(props) {
    //     // let styleele: HTMLStyleElement | undefined;
    //     // function createstyle() {
    //     //     const styleele = document.createElement("style");
    //     //     styleele.setAttribute(dataattr, "true");
    //     //     return styleele;
    //     // }
    //     // onMounted(() => {
    //     //     styleele = styleele || createstyle();
    //     //     styleele.id = props.id;
    //     //     styleele.textContent = props.stylesheet;
    //     //     document.getElementById(props.id)?.remove();
    //     //     document.head.appendChild(styleele);
    //     // });

    //     // onUnmounted(() => {
    //     //     styleele?.parentNode?.removeChild(styleele);
    //     //     document.getElementById(props.id)?.remove();
    //     //     styleele = void 0;
    //     // });
    //     // watch(
    //     //     () => [props.id, props.stylesheet],
    //     //     ([id, style], [oldid, oldstyle], oninvalid) => {
    //     //         styleele = styleele || createstyle();
    //     //         if (!id) {
    //     //             throw new Error("id:string");
    //     //         }
    //     //         styleele.id = id;
    //     //         styleele.textContent = style;
    //     //         document.getElementById(props.id)?.remove();
    //     //         document.head.appendChild(styleele);
    //     //         oninvalid(() => {
    //     //             document.getElementById(oldid)?.remove();
    //     //             document.getElementById(id)?.remove();
    //     //         });
    //     //     }
    //     // );
    // },

    render() {
        // if (!this.id) {
        //     throw new Error("id:string");
        // }
        // if (typeof window === "undefined") {
        return h(
            "style",
            {
                // id: this.id,
                [dataattr]: "true",
            },
            this.stylesheet
        );
        // }
        // return null;
    },
});
